|
我们可以在element ui 官方文档上看到提供的新增及删除方法，大多数人都想要它的可编辑状态，自己优化了一下，写了关于树形控件tree，新增顶级节点及当前节点可编辑删除操作，以及子节点的新增 效果图如下所示  代码如下：
添加顶级节点
{{ node.label }}
新增
编辑
删除
取 消
确 定
export default {
data() {
return {
addType: 1,
addNode:'',
startId: null,
setTree: [], // tree数据
NODE_KEY: "id", // id对应字段
MAX_LEVEL: 3, // 设定最大层级
NODE_ID_START: 0, // 新增节点id，逐次递减
startId: null,
defaultProps: {
// 默认设置
children: "children",
label: "label",
},
addDataList: "",
addForm: {
name: "",
},
addRules: {
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
},
addDialogTitle: "new",
addDialogVisible: false,
// 之前遗忘了这个参数 重新补发
**initParam: {
// 新增参数
name: "",
id: 0,
children: [],
},**
}
},
created() {
// 初始值
this.startId = this.NODE_ID_START;
},
methods: {
handleDelete(_node, _data) {
// 删除节点
console.log(_node, _data);
// 判断是否存在子节点
if (_data.children && _data.children.length !== 0) {
this.$message.error("此节点有子级，不可删除！");
return false;
} else {
// 删除操作
let DeletOprate = () => {
this.$nextTick(() => {
if (this.$refs.SlotTree) {
this.$refs.SlotTree.remove(_data);
this.$message.success("删除成功！");
}
});
};
// 二次确认
let ConfirmFun = () => {
this.$confirm("是否删除此节点？", "提示", {
confirmButtonText: "确认",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
DeletOprate();
})
.catch(() => {});
};
// 判断是否新增： 新增节点直接删除，已存在的节点要二次确认
_data[this.NODE_KEY]
this.$set(_node, "isEdit", false);
}
},
handleEdit(_node, _data) {
// 编辑节点
console.log(_node, _data);
// 设置编辑状态
if (!_node.isEdit) {
this.$set(_node, "isEdit", true);
}
// 输入框聚焦
this.$nextTick(() => {
if (this.$refs["slotTreeInput" + _data[this.NODE_KEY]]) {
this.$refs["slotTreeInput" + _data[this.NODE_KEY]].$refs.input.focus();
}
});
},
// 新增子级节点打开事件
appendChild(node,data) {
this.addForm.name = "";
this.addDialogVisible = true;
this.addDialogTitle = "new";
this.addDataList = data;
this.addNode=node
this.addType = 2;
},
// 新增子级节点
handleAdd(_node, _data,_name) {
// 新增节点
console.log(_node, _data);
// 判断层级
if (_node.level >= this.MAX_LEVEL) {
this.$message.warning("当前已达到" + this.MAX_LEVEL + "级，无法新增！");
return false;
}
// 参数修改
let obj = JSON.parse(JSON.stringify(this.initParam)); // copy参数
obj.id = _data[this.NODE_KEY]; // 父id
obj[this.NODE_KEY] = ++this.startId; // 节点id：逐次递减id
obj.label=_name
// 判断字段是否存在
if (!_data.children) {
this.$set(_data, "children", []);
}
// 新增数据
_data.children.push(obj);
// 展开节点
if (!_node.expanded) {
_node.expanded = true;
}
},
// 新增顶级结点打开事件
handleAddTop() {
// 添加顶部节点
let obj = JSON.parse(JSON.stringify(this.initParam)); // copy参数
console.log(obj);
obj[this.NODE_KEY] = ++this.startId; // 节点id：逐次递减id
obj.label = this.addForm.name;
console.log(obj.label)
this.setTree.push(obj);
},
// 新增顶级结点
openAddTop() {
this.addForm.name = "";
this.addDialogVisible = true;
this.addDialogTitle = "new";
this.addType = 1;
},
// 点击确定 新增子级菜单
addData() {
var t = this;
this.$refs.addRef.validate(async (valid) => {
if (valid) {
if (t.addType == 1) {
t.handleAddTop();
this.addDialogVisible = false;
} else if (t.addType == 2) {
const obj = JSON.parse(JSON.stringify(t.addForm));
// 需要判断新增还是编辑
t.handleAdd(t.addNode,t.addDataList,obj.name)
this.addDialogVisible = false;
}
} else {
console.log("error submit!!");
return false;
}
});
},
addHandleClose() {
this.addDialogVisible = false;
this.$refs.addRef.resetFields();
},
}
}
我这里主要用到弹框来新增顶级节点，自己输入名称，完成节点新增 效果图如下 
 每个子节点以及顶级节点都会运用弹框来新增节点对象
|